import React      from 'react';
import { Link }   from 'react-router-dom';
import MUtil      from "util/mm.jsx";
import Order      from "service/order-service.jsx";
import PageTitle  from 'component/page-title/index.jsx'
import ListSearch from './index-list-search.jsx'
import Pagination from 'util/pagination/index.jsx'
import TableList  from 'util/table-list/index.jsx'

let _mm    = new MUtil();
let _order = new Order();
export default class OrderList extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      list          : [],
      pageNum       : 1,
      listType      : 'list' //  list / search
    }
  };
  // 加载商品列表
  loadOrderList() {
    let listParam = {};
    listParam.listType = this.state.listType;
    listParam.pageNum  = this.state.pageNum;
    // 如果是搜索的话，需要传入搜索类型和搜索关键字
    if(this.state.listType === 'search') {
      listParam.orderNo  = this.state.orderNumber;
    }
    // 请求接口
    _order.getOrderList(listParam).then(res => {
      this.setState(res);
    }, errMsg => {
      this.setState({
        list: []
      });
      _mm.errorTips(errMsg);
    });
  }
  // 页数发生变化的时候
  onPageNumChange(pageNum) {
    this.setState({
      pageNum: pageNum,
    }, () => {
      this.loadOrderList();
    })
  }
  // 搜索
  onSearch(orderNumber) {
    let listType = orderNumber === '' ? 'list' : 'search';
    this.setState({
      listType     : listType,
      pageNum      : 1,
      orderNumber  : orderNumber,
    }, () => {
      this.loadOrderList();
    })
  }

  componentDidMount() {
    this.loadOrderList();
  }

  render () {
    let tableHeads = ['订单号', '收件人', '订单状态', '订单总价', '创建时间', '操作']
    return (
      <div id="page-wrapper">
        <PageTitle title="订单列表"/>
        <ListSearch onSearch={(orderNumber) => {this.onSearch(orderNumber)}} ></ListSearch>
        <TableList tableHeads={tableHeads}>
          {
            this.state.list.map((order, index) => {
              return (
                <tr key={index}>
                  <td>
                    <Link to={`/order/detail/${order.orderNo}`}>{order.orderNo}</Link>
                  </td>
                  <td>
                    <p>{order.receiveName}</p>
                    <p>{order.statusDesc}</p>
                  </td>
                  <td>￥{order.payment}</td>
                  <td>{order.createTime}</td>
                  <td>
                    <Link to={`/order/detail/${order.orderNo}`}>详情</Link>
                  </td>
                </tr>
              )
            })
          }
        </TableList>
        <Pagination
          showQuickJumper
          showSizeChanger
          current={this.state.pageNum}
          total={this.state.total}
          onChange={(pageNum) => this.onPageNumChange(pageNum)}
        />
      </div>
    )
  }
}